<template>
  <div class="employees">
    <!-- 头部的卡片容器 -->
    <mytool :hideLeft="true">
      <!-- 使用插槽，为了不让内容写死 -->
      <template #right>
        <el-button type="primary" size="mini" @click="toImport">导入</el-button>
        <!-- 给新增按钮设置点击事件改变新增面板的显示状态改为true -->
        <el-button type="primary" size="mini" @click="newlyShow = true">
          <i class="el-icon-plus"></i>
          添加员工</el-button
        >
      </template>
    </mytool>

    <!-- 下面内容区域 -->
    <el-card class="mycard">
      <!-- 表格区域内容 -->
      <el-table :data="tableData" border style="width: 100%" right>
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="头像" width="120">
          <!-- 拿到row属性 -->
          <template v-slot="{ row }">
            <!-- 设置v-imgerr默认图片，:src="row.staffPhoto"显示图片 -->
            <img
              :src="row.staffPhoto"
              alt=""
              class="myimg"
              v-imgerr="imgArr"
              @click="showPre(row.staffPhoto)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="workNumber" label="工号" width="120">
        </el-table-column>
        <el-table-column label="聘用形式" width="200">
          <!-- 使用过滤器把数字转换成文本 slot-scope="scope"取到当前行的数据源 -->
          <template slot-scope="scope">
            {{ scope.row.formOfEmployment | visualization }}
          </template>

          <!-- 这种使用语法也是一样的 -->
          <!-- <template v-slot="{row}">
            {{row.formOfEmployment | visualization}}
          </template> -->
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" width="120">
        </el-table-column>
        <el-table-column prop="timeOfEntry" label="入职时间" width="120">
          <template v-slot="{ row }">
            {{ row.timeOfEntry | timeFormat }}
          </template> </el-table-column
        ><el-table-column prop="correctionTime" label="转正日期" width="120">
          <template v-slot="{ row }">
            {{ row.correctionTime | timeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template v-slot="{ row }">
            <el-button type="text" @click="examine(row)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="openRole(row)">角色</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="sizes"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 使用新增面板组件 -->
    <mypanel :newlyShow.sync="newlyShow" @refresh="staffList"></mypanel>
    <!-- 预览图片组件 -->
    <el-dialog title="图片预览" :visible.sync="preShow">
      <div class="prebox">
        <!-- 转换后的容器 -->
        <canvas ref="mycode"></canvas>
      </div>
    </el-dialog>

    <!-- 角色组件 -->
    <el-dialog title="角色管理" :visible.sync="roleShow">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in roleArr"
          :key="index"
          :label="item.id"
        >
        <!-- 显示页面上的数据 -->
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="submit">提交</el-button>
        <el-button @click="roleShow = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取员工基本信息接口
import { staffListApi } from "@/api/employess";

// 导入新增面板组件
import mypanel from "./components/mypanel.vue";

// 导入获取员工角色信息请求接口
import { getRoleListApi } from "@/api/role";

// 导入用户角色信息接口渲染接口
import { getBaseApi } from "@/api/user";

//导入给员工分配角色接口
import { allocationApi } from "@/api/employess";

// 导入地址转二维码
import QRcode from "qrcode";
export default {
  // 注册新增面板组件
  components: {
    mypanel,
  },

  data() {
    return {
      // 控制角色面板的显示与隐藏
      roleShow: false,
      // 角色数据的集合
      checkList: [],
      // 控制图片的显示与隐藏
      preShow: false,
      // 定义一个图片的路径
      imageArr: "",
      // 定义一个属性控制面板的显示与隐藏
      newlyShow: false,
      // 表格的内容数据源
      tableData: [],
      // 设置默认加载页
      currentPage: 1,
      // 设置页容量的集合
      sizes: [2, 4, 8, 10],
      // 设置默认选中的页容量
      size: 10,
      //设置总条数
      total: 10,
      // 定义一个默认图片
      imgArr: require("@/assets/common/微信图片_20220314195506.jpg"),
      // 定义一个空数组保存角色信息
      roleArr: [],
      // 声明一个变量保存点击这条数据的id用来修改员工角色信息
      userId: "",
    };
  },

  // 定义一个方法
  methods: {
    // 给提交按钮设置点击事件
    async submit() {
      // 发送接口请求
      await allocationApi({
        // 这里的id用之前保存的id
        id: this.userId,
        // 这里的id使用checkList中角色的id
        roleIds: this.checkList,
      });
      // 提示用户修改成功
      this.$message.success("修改成功");
      // 关闭角色面板
      this.roleShow = false;
    },

    // 定义一个获取角色信息的方法
    async getRoleList() {
      //发送请求
      const res = await getRoleListApi();
      // 保存数据到roleArr数组中
      this.roleArr = res.data.data.rows;
    },

    // 角色的点击事件
    async openRole(row) {
      // 因为上面修改员工角色信息需要用到点击这条数据 的id得保存起来
      this.userId = row.id;
      // 打开角色面板
      this.roleShow = true;
      // 角色面板一打开就显示,参数是你点击的这条数据的id
      const res = await getBaseApi(row.id);
      // 保存到checkList中
      this.checkList = res.data.data.roleIds;
    },

    // 点击图像打开预览面板
    showPre(url) {
      // 让预览面板显示
      this.preShow = true; //异步方法，这个面板打开数据还没有出来，关闭之后才会显示，所以下面转二维码时加个计时器或者this.$nextTick(()=>{})
      //把地址转二维码
      // this.imageArr = url;
      // 第一个参数为dom元素，第二个参数为地址，第三个参数为配置项
      setTimeout(() => {
        QRcode.toCanvas(this.$refs.mycode, url, {
          width: 200,
          heiht: 200,
        });
      }, 10);
    },

    //给查看的点击事件
    examine(row) {
      this.$router.push(`/employees/detail?id=${row.id}`);
    },

    // 给导入设置点击事件
    toImport() {
      this.$router.push("/employees/myimport");
    },

    // 页面容量改变会触发
    handleSizeChange(size) {
      // 给页容量赋值
      this.size = size;
      // 刷新页面
      this.staffList();
    },

    //当前页改变会触发
    handleCurrentChange(current) {
      // 给当前页赋值
      this.currentPage = current;
      // 刷新页面
      this.staffList();
    },

    // 定义一个获取员工基本信息的方法
    async staffList() {
      const res = await staffListApi({
        // 当前显示的页码
        page: this.currentPage,
        // 每页显示的个数
        size: this.size,
      });
      // 保存到数组中
      this.tableData = res.data.data.rows;
      // 把总数量保存起来
      this.total = res.data.data.total;
    },
  },

  // 页面一打开就要有数据
  created() {
    // 调用获取员工信息方法
    this.staffList();
    // 调用获取角色信息的方法
    this.getRoleList();
  },
};
</script>

<style lang="scss">
.employees {
  margin: 20px;
  .mycard {
    margin-top: 20px;
    .el-pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
  .myimg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .prebox {
    text-align: center;
    img {
      width: 80%;
    }
  }
}
</style>
